<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%--
  Created by IntelliJ IDEA.
  User: 邱华英
  Date: 2022/9/21
  Time: 19:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<html>
<head>
    <style>
        .fengye{
            border: 1px solid;
            display: inline;
            padding: 8px 16px;
        }
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2;
        }
        .c2{
            background-color: white;
            position: fixed;
            width: 400px;
            height: 240px;
            top:50%;
            left: 50%;
            z-index: 3;
            margin-top: -100px;
            margin-left: -200px;
            font-size: 15px;
        }
        #borrowTable{
            text-align: center;
        }
        span{
            color: aliceblue;
        }


        table{

            width: 980px;
            height: 350px;
            font-size: 15px;

        }
        th{
            white-space: nowrap;
        }

        img{
            width: 100%;
            height: 100%;
        }

        /*td {*/

        /*    width: 100%;*/

        /*    word-break: keep-all; !* 不换行 *!*/

        /*    white-space: nowrap; !* 不换行 *!*/




        /*    overflow:hidden;         !* 内容超出宽度时隐藏超出部分的内容 *!*/

        /*    text-overflow:ellipsis;  !* 溢出时显示省略标记...；需与overflow:hidden;一起使用*!*/

        /*}*/




        /*th{*/
        /*    word-break: keep-all;*/
        /*}*/




        #ab{
            width: 50%;
        }
        #fff{
            float: left;
            margin-left: 50px;
            width:693px;
            height: 44px;
            border: 1px solid black;
            position: relative;
        }

        #sss {
            float: left;
            height: 41px;
            width: 100px;
            text-align: center;
        }

        #ttt {
            float: left;
            width: 510px;
            height: 41px;
            padding-left: 10px;
            line-height: 41px;
        }

        #iii {
            /* float: right; */
            position: absolute;
            top: 0;
            left: 611px;
            width: 80px;
            height: 41px;
            background-color: #2d241d;
            font-size: 16px;
            color: #fff;
        }

        th{
            white-space: nowrap;
        }

        tr{
            height: 50px;
        }



        /*table{*/
        /*    table-layout: fixed;*/
        /*    word-break: break-all;*/
        /*    word-wrap: break-word;*/
        /*}*/

        /*#mainTable{*/
        /*    table-layout: fixed;*/
        /*    width: 100%;*/
        /*    white-space: nowrap;*/
        /*}*/

        /*#mainTable td{*/
        /*    white-space: nowrap;*/
        /*    overflow: hidden;*/
        /*    text-overflow: ellipsis;*/
        /*}*/

        /*#mainTable row-bookId{*/
        /*    width: 10%;*/
        /*}*/

        .tupian {
            width: 100px;
            height: 65px;
        }
        /*#finally{*/
        /*   margin-top: 0px;*/

        /*}*/
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/booksearch.css">
    <link rel="stylesheet" href="/css/readeradmin.css">
    <title>图书馆</title>
</head>
</head>
<body>
<%
    String contextPath = request.getSession().getServletContext().getContextPath();
%>
<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>图书管理系统！&nbsp;</li>
                <li>
                    <a href="<%=contextPath%>/user/">退出</a>
                    <a href="#" class="style-red">请登录</a>
                </li>
            </ul>
        </div>
        <div class="fr">
            <ul>
                <li class="arrow-icon"><a href="aindex.html">联系管理员</a> </li>
                <li>|</li>
                <li class="arrow-icon"> <a href="login.html">关于图书馆</a></li>
            </ul>
        </div>
    </div>
</section>
<header class="header w">
    <!-- logo -->
    <div class="logo">
        <h1>
            <a href="index.html" title="图书管理系统">人类进步的阶梯</a>
        </h1>
    </div>



</header>
<nav class="nav">
    <div class="w">

        <div class="dropdown">
            <div class="dt"> <a href="index.html">首页</a> </div>
            <div class="dd">
                <ul>
                    <li><a href="<%=contextPath%>/user/library/">图书馆</a> </li>

                    <li><a href="<%=contextPath%>/user/collect/">我的收藏</a> </li>
                    <li><a href="<%=contextPath%>/user/borrow/">我的借阅</a> </li>
                    <li><a href="<%=contextPath%>/user/personCenter/">我的信息</a> </li>
                    <li><a href="<%=contextPath%>/user/inform/all/">通知</a> </li>

                </ul>
            </div>
        </div>

        <%--        <div class="sousuo">--%>
        <%--            <div>--%>
        <%--                <select name="select" id="xuanze">--%>
        <%--                    <option value="bookName">书名</option>--%>
        <%--                    <option value="author">作者</option>--%>

        <%--                </select>--%>
        <%--                <input type="text" name="" id="" placeholder="请输入">--%>
        <%--                <button class="search">搜索</button>--%>

        <%--            </div>--%>

        <%--        </div>--%>
        <form  id="fff"   action="<%=contextPath%>/user/library/select" method="post" onsubmit="return testEmpty()">
            <select id="sss"    name="select">
                <option value="bookName">书名</option>
                <option value="author">作者</option>
            </select>
            <input  id="ttt"   type="text" name="text" value="杀死一只知更鸟"/>
            <input id="iii"    type="submit" value="搜索"/><br><br>
        </form>
    </div>
</nav>
<div class="w">
    <div class="main">
        <%--    <table  id="mainTable" align="center " border="1 " cellpadding="1px " cellspacing="2px " width="980px "  ;>--%>
        <%--    <table id="mainTable" align="center "  border="1px dashed" style="table-layout: fixed;">--%>


        <%--    <div style:1000px; height:200px; overflow:scroll;>--%>
        <%--        <table border="1" rules="all" style:2000px; height:100px; text-align:center>--%>


        <%--&lt;%&ndash;    <table  id="mainTable" align="center " border="1 " cellpadding="1px " cellspacing="2px " width="980px "  ;>&ndash;%&gt;--%>
        <%--    <thead class="biaoge ">--%>
        <%--    <tr>--%>
        <%--    <th>图书编号</th>--%>
        <%--    <th>图片</th>--%>
        <%--    <th>书本类型</th>--%>
        <%--    <th>书名</th>--%>
        <%--    <th>作者</th>--%>
        <%--    <th>简介</th>--%>
        <%--    <th>总量</th>--%>
        <%--    <th>余量</th>--%>
        <%--    <th>操作1</th> <!-- //借书，还书<a></a> -->--%>
        <%--    <th>操作2</th>--%>
        <%--    </tr>--%>
        <%--    </thead>--%>



<%--        <div style:1000px; height:200px; overflow:scroll;>--%>
<%--            <table border="1" rules="all" style:2000px; height:100px; text-align:center>--%>

<%--            <div >--%>
<%--                    <table  id="mainTable" align="center " border="1 " cellpadding="1px " cellspacing="2px " width="980px "  ;>--%>








<%--            style:1000px; height:200px; overflow:scroll; word-wrap:break-word;--%>
<%--                align="center " border="1 " cellpadding="1px " cellspacing="2px " width="980px "  ; table-layout:fixed; word-break:break-all;--%>
            <table id="mainTable" border="1px" cellpadding="0" cellspacing="0">
<%--                    <thead class="biaoge ">--%>
                    <tr>
                        <th>编号</th>
                        <th>图片</th>
                        <th>类型</th>
                        <th width=13%>书名</th>
                        <th  width=13%>作者</th>
                        <th>简介</th>
                        <th>总量</th>
                        <th>余量</th>
                        <th>操作1</th>
                        <th>操作2</th>
                    </tr>
<%--                    </thead>--%>


                <%--    <form action="<%=contextPath%>/user/library/select" method="post" onsubmit="return testEmpty()">--%>
                <%--        <select name="select">--%>
                <%--            <option value="bookName">书名</option>--%>
                <%--            <option value="author">作者</option>--%>
                <%--        </select>--%>
                <%--        <input type="text" name="text" id="text"/>--%>
                <%--        <input type="submit" value="搜索"/><br><br>--%>
                <%--    </form>--%>
                <%--    <table border="1px solid" id="mainTable">--%>
                <%--        <th>图书编号</th>--%>
                <%--        <th>图片</th>--%>
                <%--        <th>书本类型</th>--%>
                <%--        <th>书名</th>--%>
                <%--        <th>作者</th>--%>
                <%--        <th>简介</th>--%>
                <%--        <th>总量</th>--%>
                <%--        <th>余量</th>--%>
                <%--        <th>操作1</th> <!-- //借书，还书<a></a> -->--%>
                <%--        <th>操作2</th>--%>

                <%
                    List<Map<String, Object>> books = (List<Map<String, Object>>) request.getAttribute("books");

                    if(books != null){
                        for(int i = 0;i < books.size();i++){
                            Map<String, Object> b = books.get(i);

                %>
<%--                <tbody>--%>
                <tr>
                    <td name="bookid"><%=b.get("id")%></td>

                    <td>
                        <div class="tupian">
                            <img src="/image/<%=b.get("photo")%>">
                        </div>
                    </td>
                    <td><%=b.get("type")%></td>
                    <td><%=b.get("bName")%></td>
                    <td><%=b.get("bAuthor")%></td>
                    <td id="ab" ><%=b.get("bIntroduction")%></td>
                    <td ><%=b.get("account")%></td>
                    <td><%=b.get("yuliang")%></td>
                    <%--            <td width="5%"><a href="userBookServlet?task=collect&bookid=<%=b.getId()%>">收藏</a></td>--%>
                    <td><a class="collect">收藏</a></td>
                    <%--            <td width="5%"><button onclick="click()">收藏</button></td>--%>
                    <td  class="borrow">借阅</td>

                </tr>
<%--                </tbody>--%>
                <%}%>
                <%}%>

            </table>
            <%--    <span id="collect">collect</span>--%>
            <br><br>


            <li class="fengye"><a onclick="deleteYeshu()"><<</a></li>
            <li class="fengye">第<label name="yeshu" id="yeshu">${yeshu}</label>页</li>
            <li class="fengye"><a onclick="addYeshu()">>></a></li>




            <div id="shade" class="c1 hide"></div>
            <div id="modal" class="c2 hide">
                <form id="borrowTable">
                    <h2>借阅图书表</h2>
                    <lable>图书编号:</lable><input type="text" readonly="true" class="bookid"><br>
                    <lable>书本类型:</lable><input type="text" readonly="true" class="booktype"><br>
                    <lable>书名:</lable><input type="text" readonly="true" class="bookName"><br>
                    <lable>作者:</lable><input type="text" readonly="true" class="author"><br>
                    <lable>总量:</lable><input type="text" readonly="true" class="account"><br>
                    <lable>余量:</lable><input type="text" readonly="true" class="yuliang"><br>
                    <lable>归还时间:</lable><input type="date" id="returnTime"><span></span><br><br>
                    <button type="button" id="submit" name="submit">确定借阅</button> <input type="button" value="取消" id="quit">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="w" id="finally">
    <div class="minyan">
        六经三史，诸子百家，非无可观，皆是为治。
    </div>

<%--</div>--%>

</body>


<script type="text/javascript">
    function addYeshu(){
        var yeshu1 = document.getElementById("yeshu");
        window.location.href="<%=contextPath%>/user/library/search/add?yeshu="+yeshu1.innerText;
    }
    function deleteYeshu(){
        var yeshu1 = document.getElementById("yeshu");
        window.location.href="<%=contextPath%>/user/library/search/delete?yeshu="+yeshu1.innerText;
    }

    function Show(){
        document.getElementById('shade').classList.remove('hide');
        document.getElementById('modal').classList.remove('hide');
    }
    function Hide(){
        document.getElementById('shade').classList.add('hide');
        document.getElementById('modal').classList.add('hide');
    }

    $(function (){
        $(".collect").click(function () {
            var j = window.event.srcElement.parentElement.parentElement.children.namedItem("bookid");

            $.ajax({
                type: "post",
                url: "<%=contextPath%>/user/library/collect",
                data: {
                    "bookid": j.innerHTML,
                },
                success: function (msg) {
                    if (msg == true) {
                        alert("收藏成功！")
                    } else {
                        alert("收藏失败")
                    }
                }
            })
        })})

    $(function (){
        $(".borrow").click(function (){
            $(".bookid").val(this.parentNode.children[0].innerHTML);
            $(".booktype").val(this.parentNode.children[2].innerHTML);
            $(".bookName").val(this.parentNode.children[3].innerHTML);
            $(".author").val(this.parentNode.children[4].innerHTML);
            $(".account").val(this.parentNode.children[6].innerHTML);
            $(".yuliang").val(this.parentNode.children[7].innerHTML);
            $("#shade").show();
            $("#modal").show();
        })
    })



    $(function (){
        $("#quit").click(function (){
            $("#returnTime").val("");
            $("#shade").hide();
            $("#modal").hide();
        })
    })

    $(function (){
        $("#submit").click(function (){
            var returnTime = $("#returnTime").val();
            var bookid = $(".bookid").val()


            if(returnTime == ""){
                alert("用户信息填写不完整");
            }else{
                $.ajax({
                    type:"post",
                    url:"<%=contextPath%>/user/library/borrow",
                    data:{
                        "bookid":bookid,
                        "returnTime":returnTime,
                    },
                    success:function (msg){
                        if(msg==true){
                            alert("借阅成功！")
                        }else{
                            alert("借阅失败")
                        }
                    }
                })
            }


        })
    })

    function testEmpty(){
        var test = document.getElementById("text").value;
        if(test.length > 0){
            return true;
        }else{
            alert("空")
            return false;
        }
    }
</script>
</html>
